import React from 'react';
import { TestSuite, TestCase, Tester } from '@rnoh/testerino';
import { StyleSheet, View, Text, ScrollView } from "react-native";
import { CreditCardView } from "@react-native-ohos/react-native-credit-card-input";

export const ReactNativeCreditCardViewTest = () => {

  return (
    <ScrollView>
      <Tester style={{ flex: 1 }}>
        <TestSuite name="CardView1">
          <TestCase
            tags={['C_API']}
            itShould="CardView中 name属性，设置name默认值111111">
            <View>
              <CreditCardView
                type={"american-express"}
                name={"111111"}
              />
            </View>
          </TestCase>
        </TestSuite>

        <TestSuite name="CardView2">
          <TestCase
            tags={['C_API']}
            itShould="CardView中  number 属性，设置number默认值为1111 1111 1111 1111">
            <View>
              <CreditCardView
                type={"american-express"}
                number={"1111 1111 1111 1111"}
              />
            </View>
          </TestCase>
        </TestSuite>

        <TestSuite name="CardView3">
          <TestCase
            tags={['C_API']}
            itShould="CardView中  expiry 属性设置expiry 默认值 11/11">
            <View>
              <CreditCardView
                type={"american-express"}
                expiry={"11/11"}
              />
            </View>
          </TestCase>
        </TestSuite>

        <TestSuite name="CardView4">
          <TestCase
            tags={['C_API']}
            itShould="CardView中 cvc 属性，设置cvc默认值为123">
            <View>
              <CreditCardView
                type={"american-express"}
                cvc={"123"}
              />
            </View>
          </TestCase>
        </TestSuite>

        <TestSuite name="CardView5">
          <TestCase
            tags={['C_API']}
            itShould="CardView中  placeholders 属性设置 设置卡片与时间，卡号默认值">
            <View>
              <CreditCardView
                type={"american-express"}
                placeholders={{
                  name: "测试test",
                  number: "1234 5678 1234 5678",
                  expiry: "MM/YY"
                }} />
            </View>
          </TestCase>
        </TestSuite>

        <TestSuite name="CardView6">
          <TestCase
            tags={['C_API']}
            itShould="CardView中  fontFamily与 placeholder属性设置卡片字体样式设置自定义样式Pacifico-Regular">
            <View>
              <CreditCardView
                type={"american-express"}
                fontFamily='Pacifico-Regular'
                placeholders={{
                  name: "测试test22211111",
                  number: "1234 5678 1234 5678",
                  expiry: "MM/YY"
                }} />
            </View>
          </TestCase>
        </TestSuite>

        <TestSuite name="CardView7">
          <TestCase
            tags={['C_API']}
            itShould="CardView中  imageFront 属性设置卡正面为黑色背景图片">
            <View>
              <CreditCardView
                type={"american-express"}
                imageFront={require("./images/black.png")}
              />
            </View>
          </TestCase>
        </TestSuite>

        <TestSuite name="CardView8">
          <TestCase
            tags={['C_API']}
            itShould="CardView中imageBack属性设置卡背面图案为黑色图片">
            <View>
              <CreditCardView
                type={"cvc"}
                focusedField={"cvc"}
                imageBack={require("./images/black.png")}
                focused={'cvc'}
              />
            </View>
          </TestCase>
        </TestSuite>

        <TestSuite name="CardView9">
          <TestCase
            tags={['C_API']}
            itShould="CardView中 type 属性，指定信用卡发卡机构的类型为visa。">
            <View>
              <CreditCardView type='visa' />
            </View>
          </TestCase>
        </TestSuite>

        <TestSuite name="CardView10">
          <TestCase
            tags={['C_API']}
            itShould="CardView中 style 属性，组件容器的自定义样式。">
            <View>
              <CreditCardView style={s.style} />
            </View>
          </TestCase>
        </TestSuite>
		
        <TestSuite name="CardView11">
          <TestCase
            tags={['C_API']}
            itShould="CardView中 focusedField 指定当前聚焦的字段为CVC并将卡背面图案为黑色图片。">
            <View>
              <CreditCardView
                type={"cvc"}
                focusedField={"cvc"}
                imageBack={require("./images/black.png")}
                focused={'cvc'}
              />
            </View>
          </TestCase>
        </TestSuite>
		<TestSuite name="CardView12">
          <TestCase
            tags={['C_API']}
            itShould="CardView中 type 属性，指定信用卡发卡机构的类型为mastercard。">
            <View>
              <CreditCardView type="mastercard" />
            </View>
          </TestCase>
        </TestSuite>
        <TestSuite name="CardView13">
          <TestCase
            tags={['C_API']}
            itShould="CardView中 type 属性，指定信用卡发卡机构的类型为american-express。">
            <View>
              <CreditCardView type="american-express" />
            </View>
          </TestCase>
        </TestSuite>
        <TestSuite name="CardView14">
          <TestCase
            tags={['C_API']}
            itShould="CardView中 type 属性，指定信用卡发卡机构的类型为diners-club。">
            <View>
              <CreditCardView type="diners-club" />
            </View>
          </TestCase>
        </TestSuite>
        <TestSuite name="CardView15">
          <TestCase
            tags={['C_API']}
            itShould="CardView中 type 属性，指定信用卡发卡机构的类型为discover。">
            <View>
              <CreditCardView type="discover" />
            </View>
          </TestCase>
        </TestSuite>
        <TestSuite name="CardView16">
          <TestCase
            tags={['C_API']}
            itShould="CardView中 type 属性，指定信用卡发卡机构的类型为jcb。">
            <View>
              <CreditCardView type="jcb" />
            </View>
          </TestCase>
        </TestSuite>
      </Tester>
    </ScrollView>
  );
};

const s = StyleSheet.create({
  style: {
    backfaceVisibility: 'hidden', // 背面是否可见
    backgroundColor: "#000000", // 背景颜色
    borderBlockColor: "#ffffff",
    borderBlockEndColor: "#ffffff",
    borderBlockStartColor: "#ffffff",
    borderBottomColor: "#ffffff",
    borderBottomEndRadius: '12',
    borderBottomLeftRadius: "11",
    borderBottomRightRadius: "13",
    borderBottomStartRadius: "14",
    borderColor: "#ffffff",
    // for android
    pointerEvents: 'none',
    isolation: 'auto',
    cursor: 'pointer',
    boxShadow: undefined,
    mixBlendMode: 'multiply'
  },
});